Encontré este error en la consola. Eché un vistazo a las preguntas anteriores pero no fueron de mucha ayuda. ¿Alguien sabe cómo he causado este bucle infinito?
"Error no detectado: demasiados renderizados. React limita el número de renderizados para evitar un bucle infinito".
import logo from './logo.svg'; import './App.css'; import Movie from './components/Movie' import React, { useEffect, useState } from 'react'; const FEATURED_API = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1" const IMG_API = "https://image.tmdb.org/t/p/w1280" const SEARCH_API = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=" function App() { const [movies, setMovies] = useState([]); useEffect(() => { fetch(FEATURED_API) .then((res) => res.json()) .then((data) => { console.log(data) setMovies(data.results); }); },[]) setMovies(movies) return <div>{ movies.length > 0 && movies.map((movie) => <Movie/>)}</div> } export default App;No puede establecer estados fuera de funciones o enlaces en componentes.
Simplemente elimine setMovies(movies) y debería funcionar;)
Tenga en cuenta que la función setMovies en cola una nueva representación que tendrá lugar tan pronto como el componente haya terminado de procesarse. Dado este comportamiento, si la función setMovies se coloca fuera de una función o useEffect , ¡te quedará atrapado en un bucle!
El problema es llamar a setMovies(movies) dentro de la raíz de la función de la aplicación y cada vez que el componente de la aplicación debe volver a renderizarse, se ejecutará y quedará atrapado en un bucle infinito, por lo que puede reemplazar su código con el siguiente:
import logo from './logo.svg'; import './App.css'; import Movie from './components/Movie' import React, { useEffect, useState } from 'react'; const FEATURED_API = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1" const IMG_API = "https://image.tmdb.org/t/p/w1280" const SEARCH_API = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=" function App() { const [movies, setMovies] = useState([]); useEffect(() => { fetch(FEATURED_API) .then((res) => res.json()) .then((data) => { console.log(data) setMovies(data.results); }); },[]); return <div>{ movies.length > 0 && movies.map((movie) => <Movie/>)}</div> } export default App;